<template>
  <div>
    <div class="bgc-white">
      <div class="container-width">
        <logo-login-bar />
      </div>
    </div>
    <div class="login-container" :style="'background: url(' + websiteRegisterBasemapUrl + ') no-repeat center;'">
      <div class="container-width flex">
        <div class="container-left position-r">
          <img :src="bannerLayerPic" class="banner-layer" alt="">
          <img :src="websiteRegisterPicUrl" alt="">
        </div>
        <div class="container-right">
          <div class="login-slider bgc-white">
            <h2>账号注册</h2>
            <div class="pad-l-30 pad-r-30 pad-t-6">
              <el-form :model="user" :rules="rules" ref="registerRef">
                <el-form-item prop="phone">
                  <el-input v-model="user.phone" class="login-input" maxlength="11" placeholder="请输入您的手机号"
                    @input="user.phone = validUtils.checkInputPositiveNum(user.phone)"
                    @keyup.enter.native="registerEls" />
                </el-form-item>
                <el-form-item prop="smsCode">
                  <div class="position-r">
                    <el-input v-model="user.smsCode" class="login-input" maxlength="6" placeholder="请输入验证码"
                      @input="user.smsCode = validUtils.checkInputPositiveNum(user.smsCode)" />
                    <div class="code-ri">
                      <el-button class="button-code" :loading="codeBtnLoading" :disabled="codeBtnDisabled"
                        @click="getCodeEls">
                        {{ btnTxt }}
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="user.password" type="password" minlength="6" class="login-input" show-password
                    placeholder="请设置您的密码" />
                </el-form-item>
                <el-form-item prop="confirmPassword">
                  <el-input v-model="user.confirmPassword" type="password" minlength="6" class="login-input"
                    show-password placeholder="请确认密码" />
                </el-form-item>
              </el-form>
              <el-button class="button" :loading="isRegisterLoading" @click="registerEls">立即注册</el-button>
              <div class="flex align-r pad-t-13">
                <div class="flex v-align-c">
                  <span class="font-color-6">已有账号？ </span>
                  <span class="font-red cursor-p" @click="login">请登录</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    reactive,
    toRefs,
    onMounted,
    inject
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import logoLoginBar from '@/components/logoLoginBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import bannerLayerPic from '@/assets/images/login_banner_2_bg.png'
  import bannerPic from '@/assets/images/login_banner_bg.png'
  import defaultBgPic from '@/assets/images/login_bg.jpg'
  import {
    ElMessage
  } from 'element-plus'
  import {
    registerUser
  } from '@/api/loginOrRegister/register'
  import {
    doSendSms
  } from '@/api/common/common'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    name: 'Index',
    components: {
      logoLoginBar,
      footerLinks,
      footerInfos
    },
    setup() {
      const router = useRouter()
      const validUtils = inject('validUtils')
      const activeName = ref('account')
      const user = ref({
        phone: '',
        smsCode: '',
        password: '',
        confirmPassword: ''
      })
      const isRegisterLoading = ref(false)
      const codeBtnLoading = ref(false)
      const codeBtnDisabled = ref(false)
      const btnTxt = ref('获取验证码')
      const time = ref(60)
      const storeState = useState('enterpriseConfig', ['enterpriseConfig'])
      const websiteRegisterBasemapUrl = ref( < string > '')
      const websiteRegisterPicUrl = ref( < string > '')
      const registerRef = ref < FormInstance > ()
      const phoneRule = (rule, value, callback) => {
        if (validUtils.isEmpty(user.value.phone)) {
          return callback('请输入手机号码！')
        }
        if (!validUtils.isValidatePhone(user.value.phone)) {
          return callback('请输入正确的手机号码！')
        }
        callback()
      }
      const passwordRule = (rule, value, callback) => {
        if (validUtils.isEmpty(user.value.password)) {
          return callback('请输入密码！')
        }
        if (!validUtils.isValidPassword(user.value.password)) {
          return callback('密码不能小于6位数，必须包含字母和数字！')
        }
        callback()
      }
      const confirmPasswordRule = (rule, value, callback) => {
        if (validUtils.isEmpty(user.value.confirmPassword)) {
          return callback('请输入确认密码！')
        }
        if (user.value.confirmPassword !== user.value.password) {
          return callback('两次密码输入不一致!')
        }
        callback()
      }

      const rules = ref({
        phone: [{
          required: true,
          validator: phoneRule
        }],
        smsCode: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur',
        }],
        password: [{
          required: true,
          validator: passwordRule
        }],
        confirmPassword: [{
          required: true,
          validator: confirmPasswordRule
        }]
      })
      onMounted(() => {
        websiteRegisterBasemapUrl.value = storeState.enterpriseConfig.value.websiteRegisterBasemapUrl ||
          defaultBgPic
        websiteRegisterPicUrl.value = storeState.enterpriseConfig.value.websiteRegisterPicUrl || bannerPic
      })

      const registerEls = () => {
        registerRef.value.validate((valid) => {
          if (valid) {
            isRegisterLoading.value = true
            registerUser(user.value).then((response: {
              isError: any
            }) => {
              isRegisterLoading.value = false
              if (response.isError) return
              ElMessage.success('注册成功!')
              login()
            })
          }
        })
      }
      const login = () => {
        router.push('/login')
      }
      const getCodeEls = () => {
        const checkArrays = ref([])
        checkArrays.value.push('phone')
        registerRef.value.validateField(checkArrays.value, (valid) => {
          if (!valid) {
            codeBtnLoading.value = true
            doSendSms(user.value.phone, 2).then(response => {
              codeBtnLoading.value = false
              if (response.isError) return
              time.value = 60
              timer()
            })
          }
        })
      }
      const timer = () => {
        if (time.value > 0) {
          time.value--
          btnTxt.value = time.value + 's后重新获取'
          codeBtnDisabled.value = true
          setTimeout(timer, 1000)
        } else {
          time.value = 0
          btnTxt.value = '获取验证码'
          codeBtnDisabled.value = false
        }
      }
      return {
        bannerLayerPic,
        bannerPic,
        activeName,
        user,
        registerEls,
        login,
        getCodeEls,
        isRegisterLoading,
        codeBtnLoading,
        codeBtnDisabled,
        btnTxt,
        timer,
        defaultBgPic,
        websiteRegisterPicUrl,
        websiteRegisterBasemapUrl,
        rules,
        registerRef
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .login-container {
    height: 488px;
    background-size: 100% 100% !important;

    .container-left {
      width: 880px;

      .banner-layer {
        position: absolute;
        right: -108px;
        top: 26px;
        z-index: 10;
      }
    }

    .container-right {
      padding-top: 43px;

      .login-slider {
        width: 400px;
        min-height: 420px;

        h2 {
          border-bottom: #d5d5d5 1px solid;
          color: #666;
          font-size: 16px;
          height: 49px;
          line-height: 49px;
          padding-left: 31px;
        }

        ::v-deep(.login-input) {
          .el-input__inner {
            border-radius: 0;
            border: #e5e5e5 1px solid;
            height: 45px;
            line-height: 45px;
            padding: 0 37px;
            font-size: 16px;
          }

          ::-webkit-input-placeholder {
            color: #999999;
          }

          ::-moz-placeholder {
            color: #999999;
          }
        }

        ::v-deep(.button) {
          color: #fff;
          background: $darkBlue;
          border-radius: 0;
          border: $darkBlue 1px solid;
          font-size: 18px;
          width: 100%;
        }

        .code-ri {
          position: absolute;
          right: 2px;
          top: 0;
          z-index: 10;
        }

        ::v-deep(.button-code) {
          color: #333;
          background: #f2f2f2;
          border-radius: 0;
          border: #f2f2f2 1px solid;
          font-size: 14px;
          width: 100%;
          padding: 12px 20px;
          min-height: 41px;
          margin-top: 2px;
        }
      }
    }
  }

  .footer-line {
    height: 1px;
    background: #dbdbdb;
    margin: 0 3%;
  }
</style>
